<!-- 业务功能管理 -->
<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i> 业务功能管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary"
                           icon="delete"
                           class="handle-del mr10"
                           @click="addDialog">添加</el-button>
                <el-button type="primary"
                           icon="delete"
                           class="handle-del mr10"
                           @click="batchDeleteByFn">批量删除</el-button>
                <el-button class="handSearchBut"
                           type="primary"
                           icon="search"
                           @click="search">搜索</el-button>
                <el-input v-model="select_word"
                          placeholder="请输入功能名称"
                          class="handle-input mr10"
                          @keyup.enter.native="search"></el-input>
            </div>
            <el-table :data="dataList"
                      border
                      style="width: 100%"
                      ref="multipleTable"
                      @select-all="selectFun"
                      @select="selectFun">
                <el-table-column type="selection"
                                 width="35"
                                 align='center'></el-table-column>
                <el-table-column prop="id"
                                 label="功能ID"
                                 sortable
                                 align='center'></el-table-column>
                <!-- <el-table-column prop="createUser"
                                 label="创建者"
                                 align='center'></el-table-column> -->
                <el-table-column prop="createDate"
                                 label="创建日期"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="upDate"
                                 label="更新日期"
                                 sortable
                                 align='center'></el-table-column>
                <el-table-column prop="name"
                                 label="功能名称"
                                 align='center'></el-table-column>
                <el-table-column prop="funcInfo"
                                 label="功能描述"
                                 align='center'></el-table-column>
                <el-table-column prop="funcType"
                                 label="功能模块类型"
                                 align='center' :formatter='formatter'></el-table-column> -->
                <el-table-column label="权限"
                                 align='center'>
                    <template slot-scope="scope">
                        <div class="tabtdHover"
                             @click="QXAttrDialog = true;QXAttrObj.funcId = scope.row.id">添加权限</div>
                        <div class="tabtdHover"
                             @click="QXDialog = true;QXListPage.funcId = scope.row.id;getQXList()">已有权限</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作"
                                 width="180"
                                 align='center'>
                    <template slot-scope="scope">
                        <el-button size="small"
                                   @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small"
                                   type="danger"
                                   @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange"
                               layout="prev, pager, next"
                               :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="dialogTitle"
                   :visible.sync="editVisible"
                   width="650px">
            <el-form ref="form"
                     :model="form"
                     label-width="110px"
                     :rules="formRules">
                <el-form-item label="模块ID"
                              v-if="inputDisabled">
                    <el-input v-model="form.id"
                              :disabled="inputDisabled"></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="功能名称"
                                      prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="功能别名">
                            <el-input v-model="form.nickname"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="功能模块类型"
                                      prop="funcType">
                            <el-select placeholder="选择类型"
                                       v-model="form.funcType">
                                <el-option label="哈哈"
                                           :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="是否显示标志">
                            <el-radio v-model="form.flag"
                                      label="0">是</el-radio>
                            <el-radio v-model="form.flag"
                                      label="1">否</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="接口路径url">
                            <el-input v-model="form.url"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-form-item label="功能描述"
                              prop="funcInfo">
                    <el-input type="textarea"
                              rows="3"
                              v-model="form.funcInfo"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示"
                   :visible.sync="delVisible"
                   width="300px"
                   center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 权限列表 -->
        <el-dialog title="权限列表"
                   :visible.sync="QXDialog"
                   width="90%">
            <div class="container">
                <div class="handle-box">
                    <el-button type="primary"
                               icon="delete"
                               class="handle-del mr10"
                               @click="deleteQX()">删除</el-button>
                    <el-button class="handSearchBut ml10"
                               type="primary"
                               icon="search"
                               @click="searchQX">搜索</el-button>
                    <el-input v-model="QXListPage.searchValue"
                              placeholder="请输入权限名称"
                              class="handle-input mr10"
                              @keyup.enter.native="searchQX"></el-input>
                </div>
                <el-table ref="multipleTable"
                          :data="QXList"
                          border
                          @select-all="selectQX"
                          @select="selectQX">
                    <el-table-column type="selection"
                                     align='center'></el-table-column>
                    <el-table-column prop="id"
                                     label="权限ID"
                                     sortable
                                     align='center'></el-table-column>
                    <el-table-column prop="name"
                                     label="权限名称"
                                     align='center'></el-table-column>
                    <el-table-column prop="desc"
                                     label="权限描述"
                                     align='center'></el-table-column>
                    <el-table-column label="操作"
                                     width="180"
                                     align='center'>
                        <template slot-scope="scope">
                            <el-button size="small"
                                       @click="modifyQx(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"
                     v-if="QXListTotal">
                    <el-pagination @current-change="QXTabPage"
                                   layout="prev, pager, next"
                                   :total="QXListTotal">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
        <!--权限属性-->
        <el-dialog title="权限属性"
                   :visible.sync="QXAttrDialog"
                   width="600px">
            <el-form ref="QXAttrForm"
                     :model="QXAttrObj"
                     label-width="100px"
                     :rules="QXAttrRules">
                <el-form-item label="权限名称"
                              prop="name">
                    <el-input v-model="QXAttrObj.name"></el-input>
                </el-form-item>
                <el-form-item label="权限描述名称">
                    <el-input type="textarea"
                              rows="3"
                              v-model="QXAttrObj.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="QXAttrDialog = false">取 消</el-button>
                <el-button type="primary"
                           @click="addQX">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'basetable',
    data () {
        return {
            QXAttrRules: {
                name: { required: true, trigger: 'blur', message: '权限名称不能为空' }
            },
            formRules: {
                name: { required: true, trigger: 'blur', message: '功能名字不能为空' },
                funcType: { required: true, trigger: 'blur', message: '功能模块类型不能为空' },
                funcInfo: { required: true, trigger: 'blur', message: '功能描述不能为空' },
            },
            cur_page: 1, // 当前在第几页
            pageSize: 10, // 每页几条数据
            select_word: '', // 搜索关键字
            del_list: [],
            editVisible: false, // 编辑弹框显示
            delVisible: false, //  删除提示框
            form: {
                name: '', // 功能名字
                id: '', // 功能id
                funcInfo: '', //  功能描述
                funcType: '', // 功能模块类型
                // nickname: '', // 功能别名
                // flag: '0', // 是否显示标志
                // url: '' // 接口路径url
            },
            dialogTitle: '添加',
            idx: -1, //  当前编辑的列表索引
            dataList: [], // 列表数组
            total: 0, // 总页数
            inputDisabled: false, // false时是添加 true是修改
            selectFunArr: [], //  批量删除
            deleteId: '', // 单条删除
            QXDialog: false, // 权限列表弹框
            QXkeyword: '', // 权限搜索关键字 
            QXList: [], // 权限list
            QXAttrDialog: false, // 添加权限弹框
            QXAttrObj: {
                name: '', // 权限名称
                desc: '', // 权限描述
                funcId: '' // 功能ID
            },
            QXListPage: { // 权限列表配置
                funcId: '',
                pageNo: 1,
                size: 10,
                searchValue: '',
                searchName: 'name'
            },
            QXListTotal: 0, // 权限列表总条数
            selectQXAttr: [], // 选中的权限集合
        }
    },
    created () {
        this.getData();
    },
    computed: {

    },
    methods: {
        // 分页导航
        handleCurrentChange (val) {
            this.cur_page = val;
            this.getData();
        },
        getData () {
            let sendData = {
                pageNo: this.cur_page,
                size: this.pageSize,
                searchName: 'name',
                searchValue: this.select_word
            }
            this.fetch(this.urlConfig.functionList, sendData, 'get').then((response) => {
                this.total = response.data.total
                this.dataList = response.data.records
                if (this.selectFunArr[this.cur_page]) {
                    this.$nextTick(() => {
                        this.dataList.forEach((item, index) => {
                            this.selectFunArr.forEach(sitem => {
                                if (JSON.stringify(sitem).indexOf(JSON.stringify(item)) > -1) {
                                    this.$refs.multipleTable.toggleRowSelection(item, true);
                                }
                            })
                        })
                    })
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        search () {
            this.cur_page = 1
            this.getData()
        },
        addDialog: function () {
            this.inputDisabled = false
            this.dialogTitle = '添加'
            this.editVisible = true;
            this.form.id = ''
            this.form.name = ''
            this.form.funcInfo = ''
            this.form.funcType = ''
            // this.form.nickname = ''
            // this.form.flag = '0'
            // this.form.url = ''
        },
        handleEdit (index, row) {
            this.inputDisabled = true
            this.dialogTitle = '编辑'
            this.idx = index
            this.form = JSON.parse(JSON.stringify(row))
            // this.form.flag = this.form.flag.toString()
            this.editVisible = true;
        },
        handleDelete (index, row) {
            this.deleteId = row.id
            this.delVisible = true;
        },
        // 保存编辑
        saveEdit () {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    let sendData = {
                        id: this.form.id,
                        name: this.form.name,
                        funcInfo: this.form.funcInfo,
                        funcType: this.form.funcType
                        // nickname: this.form.nickname,
                        // flag: this.form.flag,
                        // url: this.form.url
                    }
                    if (this.inputDisabled) {
                        // 修改
                        this.fetch(this.urlConfig.modFunction, sendData, 'get').then((response) => {
                            this.getData();
                            this.editVisible = false;
                            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                        }).catch((error) => {
                            this.$message.success(error.message);
                        })
                    } else {
                        this.fetch(this.urlConfig.addFunction, sendData, 'get').then((response) => {
                            this.editVisible = false;
                            this.getData()
                            this.$message.success(`添加成功`);
                        }).catch((error) => {
                            this.$message.success(error.message);
                        })
                    }
                }
            })
        },
        // 确定删除
        deleteRow () {
            this.fetch(this.urlConfig.batchDeleteByFn, {ids:[this.deleteId]}, 'get').then((response) => {
                this.delVisible = false;
                this.getData()
                this.$message.success(`删除成功`);
            }).catch((error) => {
                this.$message.success(error.message);
            })
        },
        selectFun (val) {
            this.selectFunArr[this.cur_page] = val;
        },
        batchDeleteByFn () {
            this.$alert('您确定删除选中的企业吗？', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action === 'confirm') {
                        let sendData = {
                            ids: []
                        }
                        this.selectFunArr.forEach(items => {
                            items.forEach(item => {
                                sendData.ids.push(item.id)
                            })
                        })
                        this.fetch(this.urlConfig.batchDeleteByFn, sendData, 'get').then((response) => {
                            if (response.code == 200) {
                                this.delVisible = false;
                                this.getData()
                            }
                            this.$message.success(response.message);
                        }).catch((error) => {
                            this.$message.success(error.message);
                        })
                    }
                }
            })
        },
        formatter (row, column, cellValue, index) {
            if (cellValue === 0) {
                return '哈哈'
            }
        },
        searchQX () {
            // 搜索权限
            this.QXListPage.pageNo = 1;
            this.getQXList()
        },
        QXTabPage (curPage) {
            // 权限列表分页切换
            this.QXListPage.pageNo = curPage
            this.getQXList()
        },
        addQX () {
            this.$refs['QXAttrForm'].validate((valid) => {
                if (valid) {
                    if (!this.QXAttrObj.id) {
                        // 添加权限
                        this.fetch(this.urlConfig.insertAuthorith, this.QXAttrObj, 'get').then((response) => {
                            if (response.code == 200) {
                                this.$message.success(response.message);
                                this.QXAttrDialog = false
                                this.QXAttrObj = {
                                    name: '', // 权限名称
                                    desc: '', // 权限描述
                                    funcId: '' // 功能ID
                                }
                            } else {
                                this.$message.error(response.message);
                            }

                        }).catch((error) => {
                            this.$message.error(error.message);
                        })
                    } else {
                        this.fetch(this.urlConfig.updateAuthorithByPK, this.QXAttrObj, 'get').then((response) => {
                            if (response.code == 200) {
                                this.$message.success('修改成功');
                                this.QXAttrDialog = false
                                this.QXAttrObj = {
                                    name: '', // 权限名称
                                    desc: '', // 权限描述
                                    funcId: '' // 功能ID
                                }
                                this.getQXList()
                            } else {
                                this.$message.error(error.message);
                            }
                        })
                    }
                }
            })
        },
        getQXList () {
            // 获取权限列表
            this.fetch(this.urlConfig.selectAuthorithListByFuncId, this.QXListPage, 'get').then((response) => {
                if (response.code != 200) {
                    this.$message.error(response.message);
                } else {
                    this.QXList = response.data.records
                    this.QXListTotal = response.data.total
                }
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        selectQX (value, value1) {
            // 选中权限集合
            this.selectQXAttr[this.QXListPage.pageNo] = value
        },
        deleteQX () {
            // 删除权限集合
            let sendData = {
                authorithIds: []
            }
            this.selectQXAttr.forEach(items => {
                items.forEach(item => {
                    sendData.authorithIds.push(item.id)
                })
            })
            this.fetch(this.urlConfig.deleteAuthorithByPK, sendData, 'get').then((response) => {
                if (response.code == 200) {
                    this.$message.success('删除成功');
                    this.selectQXAttr = []
                    this.getQXList()
                } else {
                    this.$message.error(error.message);
                }
            })
        },
        modifyQx (row) {
            this.QXAttrDialog = true
            this.QXAttrObj = {
                id: row.id,// 权限id
                name: row.name, // 权限名称
                desc: row.desc, // 权限描述
                funcId: row.funcId // 功能ID
            }
        }
    }
}

</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}
.handle-input {
    width: 300px;
    display: inline-block;
    float: right;
}
.handSearchBut {
    float: right;
}
.del-dialog-cnt {
    font-size: 16px;
    text-align: center;
}
</style>
